Fix user message overflow detection on share page #5998
+3
−5
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Replace CSS line-clamp with max-height to enable proper overflow detection. The createOverflow function uses scrollHeight > clientHeight to detect when content overflows, but line-clamp doesn't create scrollable overflow. This caused expand button to never appear for truncated user messages. Changes: - Replace -webkit-line-clamp:3 with max-height: calc(1.5em * 3) - Update expanded state to use max-height: none and overflow: visible Note: This fix is targeted specifically to user messages on share page.
ahosker
force-pushed
the
fix/share-overflow-issue
branch
from
e5fc740 to
a6ca25e
Compare
Contributor
|
Hey! Your PR title Please update it to start with one of:
Where See CONTRIBUTING.md for details. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue
User messages on the share page (https://opncd.ai/share/) were being truncated after 3 lines without providing any way to view the full content. The "Show more" expand button was never appearing because the overflow detection mechanism was failing.
Root Cause
The
ContentTextcomponent used CSSline-clamp: 3for truncation. ThecreateOverflow()function detects when content should show an expand button by checkingel.scrollHeight > el.clientHeight + 1. However,line-clamptruncates content visually without creating actual scrollable overflow, soscrollHeightalways equalsclientHeightand the overflow detection returnsfalsepermanently.Solution
Replaced CSS
line-clampwithmax-height: calc(1.5em * 3)to truncate text at approximately 3 lines. This creates actual scrollable overflow when content exceeds the limit, allowing thescrollHeight > clientHeight + 1check to work correctly and properly show the "Show more" button.Changes
packages/web/src/components/share/content-text.module.css: Replaced-webkit-line-clamp: 3andline-clamp: 3withmax-height: calc(1.5em * 3); updated expanded state to usemax-height: noneandoverflow: visibleNote
Testing: GLM-4.7 is confident this fix resolves the issue, but I was unable to test it locally in the development environment.